<template>
  <div id="box">
    <div>
      <span>确认订单</span>
    </div>
    <div>

    </div>
    <div>
      <div v-for="item in Cart" :key="item.id">
        <div class="item">
          <img :src="item.img">
          <div class="info">
            <span>{{item.name}}</span>
            <span>{{totalPrice}}</span>
            <div>
              <button @click="Cart_num(item,'-')">-</button>
              <span>{{item.num}}</span>
              <button @click="Cart_num(item,'+')">+</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <button>{{ totalPrice }}去支付</button>
    </div>
  </div>
</template>
<script>
  // 导入组件
  
  export default {
    // 注册组件
    components: {
     },
    // 实例属性
    name: 'APP',
    // 数据
    data () {
      return {
        Cart: [],
       }
     },
     // 实例方法
     methods: {
      // 购物车数量加减
      Cart_num(item,type){
        if(type === '+'){
          item.num++
        }else if(type === '-'){
          item.num--
          if(item.num < 1){
            item.num = 1
          }
      }
    }
     },
     // 计算属性
     computed: {
      // 总价
      totalPrice(){
        let total = 0
        for(let i=0;i<this.Cart.length;i++){
          total += this.Cart[i].num * this.Cart[i].price
        }
        return total.toFixed(2)
      }
     },
     // 创建后（只能访问数据，不能操作dom）
     created () {
     },
     // 挂载后（既能访问数据，也能操作dom）
     mounted () {
      this.Cart = JSON.parse(localStorage.getItem('Cart')) || []
     },
     // 过滤器
     filters: {
      //价格格式化
      formatPrice(price){
        return '¥'+price.toFixed(2)
      }
     }
  }
</script>
<style lang="less" scoped>
    #box{
    width: 400px;
    height: 500px;
    background-color: gray;
  }
  img{
    height: 100px;
    width: 100px;
  }
  .item{
    display: flex;
  }
  .info{
    display: flex;
    flex-direction: column
  }
</style>
